<template>
    <div>
        <back-head title="售后订单详情" returnFlag="true"></back-head>
        
        <!-- 基本信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">基本信息</span>
            </div>
            <el-row class="info">
                <el-col :span="10">
                    <p>售后状态：{{statusList[baseInfo.status] || '未知'}}</p>
                    <p>退货单号：{{baseInfo.applyId}}</p>
                    <p>订单编号：{{baseInfo.orderId}}</p>
                </el-col>
                <el-col :span="14">
                    <p v-if="baseInfo.status == 5">驳回原因：{{baseInfo.denyReason}}</p>
                    <p>申请时间：{{baseInfo.createTime | formatDate}}</p>
                    <p>状态更新时间：{{baseInfo.updateTime | formatDate}}</p>
                </el-col>
            </el-row>
        </el-card>

        <!-- 商品信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">商品信息</span>
            </div>
            <div class="info">
                <p>商品名称：{{baseInfo.productName}}</p>
                <p>SKU：{{baseInfo.skuId}}</p>
                <p>SKU单价：¥{{goodsInfo.originalPrice}}</p>
                <p>实付金额小计：¥{{goodsInfo.subtotalPrice}}</p>
            </div>
        </el-card>

        <!-- 退货信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">退货信息</span>
            </div>
            <div class="info">
                <p>申请退货数量：{{goodsInfo.count}}</p>
                <p>退货原因：{{goodsInfo.reason}}</p>
                <p>退货说明：{{goodsInfo.reasonDesc}}</p>
                <p style="vertical-align: top;">上传凭证：
                    <img v-for="pic in picUrlList" :src="pic" alt="" class="picurl">
                </p>
            </div>
        </el-card>

        <!-- 退货邮寄地址 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">退货邮寄地址</span>
            </div>
            <div class="info">
                <p>退货地址：{{goodsInfo.fullAddress}}</p>
                <p>收件人：{{goodsInfo.name}}</p>
                <p>电话：{{goodsInfo.mobile}}</p>
            </div>
        </el-card>

        <!-- 退货物流 -->
        <el-card class="mgb20" shadow="hover" v-if="baseInfo.status != 1 && baseInfo.status != 2">
            <div slot="header" class="clearfix">
                <span class="title">退货物流</span>
            </div>
            <div class="info">
                <p>物流公司：{{expressObj.trackingCompany}}</p>
                <p>物流单号：{{expressObj.trackingNum}}
                    <el-button type="primary" icon="el-icon-lx-edit" @click="editLog(2,expressObj)" v-if="baseInfo.status == 3">修改</el-button>
                </p>
            </div>
        </el-card>
    
        <!-- 修改物流信息组件 -->
        <edit-form-log
            :type="editType"
            :editFormLog="editFormLog"
            :applyId="editId"
            ref="editFormRef"
            @getData="getData">
        </edit-form-log>
        
    </div>
</template>

<script>
    export default {
        data() {
            return {
                applyId : this.$route.query.applyId,
                baseInfo : {},  //基本信息
                goodsInfo : {},   //商品信息
                expressObj : {},   //物流信息
                statusList: {
                    1 : '审核中',
                    2 : '待退货',
                    3 : '寄送中',
                    9 : '收货审核中',
                    4 : '已退款',
                    5 : '驳回',
                    6 : '已取消'  
                },
                editFormLog : {},     //添加/修改物流信息obj
                editType : 1,
                editId : ''
            }
        },
        computed: {
            picUrlList(){
                if(this.goodsInfo.picurls && this.goodsInfo.picurls != null){
                    return this.goodsInfo.picurls.split(',');
                }else{
                    return [];
                }
                
            }
        },
        created(){
            this.getData();
        },
        methods: {            
            editLog(type,data){   //type: 1/填写   2/修改
                this.editType = type;
                if(this.editType == 1){    //填写
                    this.editFormLog = {};
                    this.editId = '';
                }else{      //修改
                    this.editFormLog = {
                        logCompany : data.trackingCompany,
                        logNum : data.trackingNum
                    };
                    this.editId = data.applyId;
                }
                this.$refs['editFormRef'].dialogShow = true;
            },
            getData(){
                this.$axios
                    .post("/admin/refund/orderRefundDetails.json",{
                        applyId : this.applyId
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.baseInfo = data.data.refundOrders;
                            this.goodsInfo = data.data.refundSkuList[0] || {};
                            this.expressObj = data.data.expressList[0] || {};
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
            }
        }
    }

</script>


<style scoped>
    .info p{
        padding: 8px 20px 8px 0;
    }
    .picurl{
        vertical-align: top;
        max-width: 200px;
        margin-right: 20px;
        margin-bottom: 20px;
    }
</style>
